<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
<composite:interface>
    <composite:attribute name="renderMap" type="boolean" default="false" required="true" />
    <composite:attribute name="mapWidth" type="int" required="true" />
    <composite:attribute name="mapHeight" type="int" required="true" />
    <composite:attribute name="latitude" type="double" required="true" />
    <composite:attribute name="longitude" type="double" required="true" />
    <composite:attribute name="model" type="org.primefaces.model.map.MapModel" />
    <composite:attribute name="zoom" type="int" default="16" />
    <composite:attribute name="overlaySelectListener" method-signature="void onMarkerSelect(org.primefaces.event.map.OverlaySelectEvent)" />
    
    <composite:facet name="infoWindow" />
</composite:interface>
<composite:implementation>
    <h:panelGroup
        id="mapaSemInformacoes"
        rendered="#{!cc.attrs.renderMap}"
        layout="block"
        style="width: #{cc.attrs.mapWidth}px; height: #{cc.attrs.mapHeight}px; border: 1px solid #ccc; vertical-align: middle; display: table-cell; text-align: center;">
        <h:outputText value="#{appMessages['pontosColeta.cadastrar.informacoesMapaIncompletas']}" />
    </h:panelGroup>
    <p:gmap
        rendered="#{cc.attrs.renderMap}"
        id="mapa"
        center="#{cc.attrs.latitude},#{cc.attrs.longitude}"
        zoom="#{cc.attrs.zoom}"
        type="HYBRID"
        model="#{cc.attrs.model}"
        style="width: #{cc.attrs.mapWidth}px; height: #{cc.attrs.mapHeight}px; margin: 0 auto;"
        widgetVar="mapaponto">
        
        <p:ajax event="overlaySelect" listener="#{paginaInicialBean.onSelecionarMarcador()}" />
        
        <p:gmapInfoWindow>
            <h2><h:outputText value="#{paginaInicialBean.pontoSelecionado.nome}" /></h2>
            
            <h:outputText style="font-size: 1.10em;" value="#{paginaInicialBean.pontoSelecionado.corpoHidrico.nome}" />
            
            <p:dataTable
                style="width: 100%;"
                value="#{paginaInicialBean.amostrasPontoSelecionado}"
                var="amostra"
                emptyMessage="Nenhum registro.">
                <f:facet name="header">
                    Últimas amostras
                </f:facet>
            
                <!-- Data da amostra -->
                <p:column headerText="Amostra">
                    <h:outputText value="#{amostra.data}">
                        <f:convertDateTime dateStyle="medium" />
                    </h:outputText>
                </p:column>
                
                <!-- IQA da amostra -->
                <p:column headerText="IQA" style="background-color: ##{amostra.qualidade.corHexa}; color: ##{amostra.qualidade.corHexaTexto};">
                    <h:outputText value="#{amostra.IQA}">
                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
                    </h:outputText>
                </p:column>
            </p:dataTable>
        </p:gmapInfoWindow>
    </p:gmap>

    <div class="legenda-marcadores" style="display: none;">
        <ul>
            <li>
                <h:graphicImage library="img" name="ponto-azul.png" />
                <h:outputText value="#{messages['iqa.qualidade.otima']}" />
            </li>
            <li>
                <h:graphicImage library="img" name="ponto-verde.png" />
                <h:outputText value="#{messages['iqa.qualidade.boa']}" />
            </li>
            <li>
                <h:graphicImage library="img" name="ponto-amarelo.png" />
                <h:outputText value="#{messages['iqa.qualidade.aceitavel']}" />
            </li>
            <li>
                <h:graphicImage library="img" name="ponto-vermelho.png" />
                <h:outputText value="#{messages['iqa.qualidade.ruim']}" />
            </li>
            <li>
                <h:graphicImage library="img" name="ponto-preto.png" />
                <h:outputText value="#{messages['iqa.qualidade.pessima']}" />
            </li>
            <li>
                <h:graphicImage library="img" name="ponto-branco.png" />
                <h:outputText value="#{messages['iqa.qualidade.desconhecida']}" />
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    setTimeout(function() {
        var gmap = mapaponto.getMap();
        
        if (gmap != null) {
            var legenda = jQuery('.legenda-marcadores').css('display', 'block');
            gmap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legenda.get(0));
        }
    }, 2000);
    </script>
</composite:implementation>
</html>